<template>
	<view>
		<cu-custom :isBack="true">
			<block #content>设备详情</block>
		</cu-custom>

		<view style="position:fixed;top:160rpx;z-index:1025;width:100%;">
			<view class="margin-lr-xl flex justify-between align-center bg-white"
				style="border-radius:15rpx;padding: 60rpx 50rpx;">
				<view class="flex justify-start align-center">
					<img style="width:90rpx;height:auto" src="../../assets/images/device.png" alt="" mode="widthFix">
					<view class="padding-left">
						<view class="text-df text-black text-bold text-title">{{deviceName}}</view>
						<view class="text-xs text-gray-color margin-top-xs">设备编号: {{code}}</view>
						<view class="text-xs text-gray-color address-input">设备地址: {{address}}</view>
					</view>
				</view>
				<view class="text-center">
					<view class="flex justify-start align-center">
						<signal id="signal" :netSignal="signal" :inline="inline"></signal>
						<surplus id="surplus" :battery="battery" :inline="inline" class="margin-left-sm"></surplus>
					</view>
					<view class="text-center margin-top-xs">
						<img v-if="inline === 1" style="width:50rpx;height:50rpx;"
							src="../../assets/images/onLineLamp.png" alt="" mode="widthFix">
						<img v-else style="width:50rpx;height:50rpx;" src="../../assets/images/offLamp.png" alt=""
							mode="widthFix">
					</view>
				</view>
			</view>
			<view class="margin-lr-xl" @tap="goToDeviceParam(item)">
				<view class="flex justify-between align-center common-box"
					style="border-radius: 8px;width:100%;height:12vw;">
					<view class="text-bold text-df text-red-color margin-left-lg">设备参数详情</view>
					<view class="text-df text-red-color padding-right-sm">
						立即查看
						<text class="cuIcon-right padding-left-sm"></text>
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="scrollPage" style="margin-top:460rpx">
			<view class="flex justify-end align-center text-sm margin-top-lg margin-right-lg padding-right-sm">
				<view class="margin-right">更新时间 :</view>  
				<view class="text-gray">{{inlineTime}}</view>
			</view>
			<view class="margin-bottom-lg margin-lr-xl flex flex-wrap justify-between align-center text-df">
				<view v-for="(item,index) in detailSensorList" :key="index"
					class="margin-top common-shadow padding-tb padding-left flex flex-wrap justify-start align-center"
					style="width:48%;">
					<view style="width:32%">
						<image style="width:50rpx;height:auto" :src="`${iconBaseUrl}${item.icon}`" mode="widthFix">
						</image>
					</view>
					<view style="width:68%">
						<view class="text-gray">
							{{item.name}}
						</view>
						<view style="margin-top:5rpx;">
							{{(item.displayValue||item.displayValue===0)?(item.displayValue+item.displayUnit):''||((item.flagValue||item.flagValue===0)?(item.flagValue+item.unit):'')}}
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="margin-tb-lg margin-lr-xl flex justify-between align-center text-df">
				<view class="common-shadow  padding-tb padding-left flex justify-start align-center" style="width:48%;">
					<view style="width:32%">
						<image style="width:50rpx;" src="../../assets/images/deviceInfo/signal.png" mode="widthFix">
						</image>
					</view>
					<view style="width:68%">
						<view class="text-gray">
							信号指数
						</view>
						<view style="margin-top:5rpx;">
							20dBm
						</view>
					</view>
				</view>
			</view>
		 -->
			<view class="flex justify-between align-center margin-lr-xl padding-right-sm" @tap="cmdData()">
				<view class="text-bold text-df">控制</view>
				<view class="text-df">
					历史记录
					<text class="cuIcon-right padding-left-sm"></text>
				</view>
			</view>
			<view v-for="(item,index) in controllerList" :key="index"
				class="common-shadow padding-sm margin-xl flex justify-between align-center" @tap="selectOperate(item)">
				<view class="margin-left-sm flex justify-start align-center">
					<image style="width:40rpx;height:auto" :src="`${iconBaseUrl}${item.icon}`" mode="widthFix"></image>
					<view class="text-df padding-left-lg">{{item.name}}</view>
				</view>
				<view class="text-df text-gray flex justify-start align-center">
					<view v-if="item.displayModel==='time_interval'">
						<!-- time_interval -->
						<view class="flex justify-end align-center flex-wrap margin-bottom-sm ">
							<view class="flex-sub flex justify-center align-center setting-border padding-xs">
								<view class="">
									{{controllerMap[item.id] && Array.isArray(controllerMap[item.id]) ? controllerMap[item.id][0] : '开始时间'}}
								</view>
								<view class="margin-left-lg margin-right-lg text-center" style="width:10%;">
									<text class="text-df">至</text>
								</view>
								<view class="">
									{{controllerMap[item.id] && Array.isArray(controllerMap[item.id]) ? controllerMap[item.id][1] : '结束时间'}}
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.displayModel==='control_ratio'">
						<!-- control_ratio -->
						<view class="flex justify-end flex-wrap">
							<view v-for="(param,paramIndex) in item.commandList" :key="paramIndex">
								<view v-if="param.value == controllerMap[item.id]">
									{{param.name}}
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.displayModel==='control_slider'">
						<!-- control_slider -->
						<view class="">
							controllerMap[item.id]
						</view>
					</view>
					<view v-if="item.displayModel==='custom_btn'">
						<!-- custom_btn -->
						<view class="">
							{{controllerMap[item.id]}}
						</view>
					</view>
					<view v-if="item.displayModel==='display_time_switch'">
						<!-- display_time_switch -->
						<view class="flex justify-end align-center flex-wrap margin-bottom-sm ">
							<view class="">
								{{controllerMap['time' + item.id] ? controllerMap['time' + item.id] : '00:00:00'}}
							</view>
						</view>
					</view>
					<view v-if="item.displayModel != 'control_btn'" class="cuIcon-right padding-left-sm"></view>
				</view>
			</view>
			<!-- <view class="common-shadow padding-sm margin-xl flex justify-between align-center">
				<view class="margin-left-sm flex justify-start align-center">
					<image style="width:40rpx;" src="../../assets/images/deviceInfo/mode.png" mode="widthFix"></image>
					<view class="text-df padding-left-lg">设置负载工作模式</view>
				</view>
				<picker @change="workModeChange" :value="workModeIndex" :range='workModeList'>
					<view class="text-df text-gray">
						<text class="">{{workModeList[workModeIndex]}}</text>
						<text class="cuIcon-right padding-left-sm"></text>
					</view>
				</picker>
			</view>
			<view class="common-shadow padding-sm margin-xl flex justify-between align-center">
				<view class="margin-left-sm flex justify-start align-center">
					<image style="width:40rpx;" src="../../assets/images/deviceInfo/LEDMode.png" mode="widthFix">
					</image>
					<view class="text-df padding-left-lg">定时运行时间</view>
				</view>
				<picker mode="multiSelector" :range='timeList' @change="timeChange" @columnchange="timeColumnchange"
					:value="timeIndex">
					<view class="text-df text-gray">
						<text>定时</text>
						<text v-if="timeIndex[0] != 0">{{timeList[0][timeIndex[0]]}}</text>
						<text v-if="timeIndex[1] != 0">{{timeList[1][timeIndex[1]]}}</text>
						<text v-if="timeIndex[2] != 0">{{timeList[2][timeIndex[2]]}}</text>
						<text class="cuIcon-right padding-left-sm"></text>
					</view>
				</picker>
			</view>
			<view class="common-shadow padding-sm margin-xl flex justify-between align-center">
				<view class="margin-left-sm flex justify-start align-center">
					<image style="width:40rpx;" src="../../assets/images/deviceInfo/time.png" mode="widthFix"></image>
					<view class="text-df padding-left-lg">LED工作模式</view>
				</view>
				<picker @change="workModeChange" :value="workModeIndex" :range='workModeList'>
					<view class="text-df text-gray">
						<text class="">{{workModeList[workModeIndex]}}</text>
						<text class="cuIcon-right padding-left-sm"></text>
					</view>
				</picker>
			</view> -->
		</scroll-view>

		<view class="cu-modal bottom-modal" :class="[isDisplayModel?'show':'']" style="text-align: start;">
			<view class="cu-dialog padding-bottom-lg bg-white">
				<view class="cu-bar bg-white">
					<view class="action text-bold">
						命令控制
					</view>
					<view class='action text-bold'>
						<view class="cuIcon-close text-grey" @tap="isDisplayModel = false"></view>
					</view>
				</view>
				<view class="margin" style="min-height: 20px;">
					<view v-for="(item,index) in currentControllerList" :key="index" class="">
						<view v-if="item.displayModel==='time_interval'">
							<!-- time_interval -->
							<view class="flex justify-end align-center flex-wrap margin-bottom-sm ">
								<view class="flex-sub flex justify-center align-center setting-border padding-xs">
									<picker :disabled="item.disabled" mode="multiSelector"
										:value="controllerMapTimeInterval[item.id] ? controllerMapTimeInterval[item.id].startTimeSlotMultiIndex : [0, 0, 0]"
										:range="startTimeSlotMultiArray"
										@change="startMultiCustomTimeSlotChange($event,item.id)">
										<view class="text-gray">
											{{controllerMap[item.id] && Array.isArray(controllerMap[item.id]) ? controllerMap[item.id][0] : '开始时间'}}
										</view>
									</picker>
									<view class="margin-left-lg margin-right-lg text-center" style="width:10%;">
										<text class="text-df">至</text>
									</view>
									<picker :disabled="item.disabled" mode="multiSelector"
										:value="controllerMapTimeInterval[item.id] ? controllerMapTimeInterval[item.id].endTimeSlotMultiIndex : [0, 0, 0]"
										:range="endTimeSlotMultiArray"
										@change="endMultiCustomTimeSlotChange($event,item.id)">
										<view class="text-gray">
											{{controllerMap[item.id] && Array.isArray(controllerMap[item.id]) ? controllerMap[item.id][1] : '结束时间'}}
										</view>
									</picker>
								</view>
								<button class="margin-lr-sm cu-btn block text-white" size="mini"
									:style="{backgroundColor: themeConfig.primaryColor}"
									@tap.stop="comfirmClick(item)">确定</button>
							</view>
						</view>
						<view v-if="item.displayModel==='control_ratio'">
							<!-- control_ratio -->
							<view class="flex justify-end flex-wrap">
								<button v-for="(param,paramIndex) in item.commandList" :key="paramIndex"
									class="margin-right-sm margin-bottom-sm cu-btn block" size="mini"
									:class="[param.value == controllerMap[item.id] ? 'selectButton' : 'unSelectButton']"
									:style="{'--color': themeConfig.primaryColor}"
									@tap.stop="comfirmClick(item,param.value)">{{param.name}}</button>
							</view>
						</view>
						<view v-if="item.displayModel==='control_slider'">
							<!-- control_slider -->
							<view class="flex justify-end flex-wrap">
								<input-number class="flex-sub" :number="controllerMap[item.id]" :item="item"
									:max="parseInt(item.valueEnd)" :min="parseInt(item.valueStart)"
									@changeNumber="changeNumber"></input-number>
								<button class="margin-lr-sm margin-bottom-sm cu-btn block text-white" size="mini"
									:style="{backgroundColor: themeConfig.primaryColor}"
									@tap.stop="comfirmClick(item)">确定</button>
							</view>
						</view>
						<view v-if="item.displayModel==='custom_btn'">
							<!-- custom_btn -->
							<view class="flex justify-end flex-wrap">
								<input v-model="controllerMap[item.id]" type="text"
									class="margin-right-sm flex-sub setting-border text-center setting-input" />
								<button class="margin-right-sm margin-bottom-sm cu-btn block text-white" size="mini"
									:style="{backgroundColor: themeConfig.primaryColor}"
									@tap.stop="comfirmClick(item)">确定</button>
							</view>
						</view>
						<view v-if="item.displayModel==='display_time_switch'">
							<!-- display_time_switch -->
							<view class="flex justify-end align-center flex-wrap margin-bottom-sm ">
								<view
									class="flex-sub flex justify-center align-center setting-border padding-xs margin-right-sm">
									<picker :disabled="item.disabled" mode="multiSelector"
										:value="controllerMapTimeInterval[item.id] ? controllerMapTimeInterval[item.id].timeSlotMultiIndex : [0, 0, 0]"
										:range="timeSlotMultiArray" @change="multiCustomTimeSlotChange($event,item)">
										<view class="text-gray">
											{{controllerMap['time' + item.id] ? controllerMap['time' + item.id] : '00:00:00'}}
										</view>
									</picker>
								</view>
								<button v-for="(param,paramIndex) in item.commandList" :key="paramIndex"
									class="margin-right-sm cu-btn block" size="mini"
									:class="[param.value == controllerMap[item.id] ? 'selectButton' : 'noSelectButton']"
									:style="{'--color': themeConfig.primaryColor}"
									@tap.stop="comfirmClick(item,param.value)">{{param.name}}</button>
							</view>
							<view class="item-desc">
								<view class="countdown" v-if="item.running&&durations[item.id]>0">
									倒计时：{{returnHMS(durations[item.id])}}
									<view class="count-style">
										<view class="count-style-inner"
											:style="{'width':(durations[item.id]/parseInt(item.durationTotal))*100+'%','--color': themeConfig.primaryColor}">
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let hours = []
	let minutes = []
	let seconds = []
	for (let i = 0; i <= 23; i++) {
		hours.push(i + "小时")
	}
	for (let i = 0; i <= 59; i++) {
		minutes.push(i + "分钟")
	}
	for (let i = 0; i <= 59; i++) {
		seconds.push(i + "秒")
	}
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import * as storage from '@/util/storage'
	import myConfig from '@/myConfig'
	import * as ztIotApi from '@/api/dmIot/ztIotApi.ts'
	import Surplus from '@/components/ztn-custom/Surplus2'
	import Signal from '@/components/ztn-custom/Signal'
	export default {
		name: 'deviceInfo',
		components: {
			Surplus,
			Signal
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		data() {
			return {
				iconBaseUrl: myConfig.app.iconBaseUrl,
				id: "",
				code: "",
				deviceName: "",
				battery: "",
				signal: "",
				inline:"",
				inlineTime:"",
				address: "",
				sensorList: [],
				detailSensorList: [],
				controllerList: [],
				controllerMap: {},
				controllerMapTimeInterval: {},
				isDisplayModel: false,
				customBarHeight: storage.getCustomBarHeight(),
				statusBarHeight: storage.getStatusBarHeight(),
				tabbarHeight: storage.getTabbarHeight(),
				// workModeList: [],
				// workModeIndex: 1,
				// timeList: [],
				// timeIndex: [0, 0, 0]
			}
		},
		onLoad(option) {
			const workModeList = [];
			for (let i = 1; i <= 10; i++) {
				workModeList.push("工作模式" + i)
			}
			this.workModeList = workModeList
			this.timeList = [hours, minutes, seconds]
			this.getInsecticidalLampDevice(option.id)
		},
		methods: {
			workModeChange(e) {
				let index = e.detail.value
				this.workModeIndex = index
			},
			timeChange(e) {
				const index = e.detail.value
			},
			timeColumnchange(e) {
				const column = e.detail.column
				const value = e.detail.value
				switch (column) {
					case 0: //拖动第1列
						this.timeIndex = [value, this.timeIndex[1], this.timeIndex[2]]
						break;
					case 1:
						this.timeIndex = [this.timeIndex[0], value, this.timeIndex[2]]
						break
					case 2:
						this.timeIndex = [this.timeIndex[0], this.timeIndex[1], value]
						break
					default:
						break;
				}
			},
			getInsecticidalLampDevice(id) {
				ztIotApi.getInsecticidalLampDevice({
					id
				}).then((res) => {
					const {
						msg,
						data,
						success
					} = res
					if (success) {
						let {
							id,
							code,
							deviceName,
							battery,
							signal,
							inline,
							inlineTime,
							address,
							sensorList,
							detailSensorList,
							controlList
						} = data
						this.id = id
						this.code = code
						this.deviceName = deviceName
						this.battery = battery
						this.signal = signal
						this.inline = inline
						this.inlineTime = inlineTime
						this.address = address
						this.detailSensorList = detailSensorList
						let controllerList = []
						this.controllerMap = {};
						this.controllerMapTimeInterval = {};
						for (let i = 0; i < controlList.length; i++) {
							let item = controlList[i]
							let params = {}
							if (item.displayModel === 'time_interval') {
								this.$set(this.controllerMapTimeInterval, item.id, {
									startTimeSlotMultiIndex: [0, 0, 0],
									endTimeSlotMultiIndex: [0, 0, 0]
								})
							}
							if (item.cmdValue && typeof(item.cmdValue) === 'string') {
								params = JSON.parse(item.cmdValue)
								if (params.value1 && !params.value2) {
									this.$set(this.controllerMap, item.id, params.value1)
								} else if (params.value1 && params.value2) {
									this.$set(this.controllerMap, item.id, [params.value1, params
										.value2
									])
								}
							}
							if (item.displayModel === 'display_time_switch') {
								if (params.time) {
									let hms = params.time.split(':')
									let date = new Date();
									let year = date.getFullYear();
									let month = date.getMonth() + 1;
									let day = date.getDate();
									let hour = parseInt(hms[0]);
									let min = parseInt(hms[1]);
									let second = parseInt(hms[2]);
									this.$set(this.controllerMap, ('time' + item.id), params.time)
									this.$set(this.controllerMapTimeInterval, item.id, {
										timeSlotMultiIndex: [hour, min, second],
									})
								}
							}
							controllerList.push(item)
						}
						this.controllerList = controllerList
					}
				})
			},
			selectOperate(item) {
				this.currentControllerList = [item]
				if (item.displayModel !== 'control_btn') {
					//control_btn 按钮
					this.isDisplayModel = true
				} else {
					//其他
					this.isDisplayModel = false
					this.comfirmClick(item)
				}
			},
			comfirmClick(item, value) {
				if (item.running) {
					showToast("当前正在操作", "none", 2000, false)
					return;
				}
				showLoading(this.$t('loading'), true)
				this.comfirmIng = true
				let params = {
					cmdFlag: item.cmdFlag,
					deviceId: this.id,
					param: {}, // 时间区间2个值，其他目前1个值
					type: 0
				}
				if (item.displayModel === 'time_interval') {
					//time_interval 时间区间
					if (this.controllerMap[item.id] && this.controllerMap[item.id].length === 2) {
						// console.log(this.controllerMap[item.id])
						params.param.value1 = this.controllerMap[item.id][0]
						params.param.value2 = this.controllerMap[item.id][1]
					} else {
						this.$message.error("请选择时间区间");
						return
					}
				} else if (item.displayModel === 'control_ratio') {
					//control_ratio 单选
					this.$set(this.controllerMap, item.id, value)
					params.param.value1 = this.controllerMap[item.id]
				} else if (item.displayModel === 'control_slider') {
					//control_slider 滑块
					params.param.value1 = this.controllerMap[item.id]
				} else if (item.displayModel === 'control_btn') {
					//control_btn 按钮
					params.param = {};
				} else if (item.displayModel === 'custom_btn') {
					//custom_btn 输入框
					if (!this.controllerMap[item.id]) {
						showToast("请输入内容", "none", 2000, false)
					}
					params.param.value1 = this.controllerMap[item.id]
				} else if (item.displayModel === 'display_time_switch') {
					//倒计时
					if (!this.controllerMap['time' + item.id]) {
						this.$message.error("请选择执行时长");
						return
					}
					this.$set(this.controllerMap, item.id, value)
					params.param.time = this.controllerMap['time' + item.id]
					params.param.value1 = this.controllerMap[item.id]
				}
				setTimeout(()=>{
					hideLoading()
				},1000)
				this.handleCommit(params)
			},
			handleCommit(params) {
				ztIotApi.commandInsecticidalLampDevice(params).then(res => {
					if (res.success) {
						showToast("操作成功！", "none", 2000, false)
					}
					setTimeout(() => {
						this.getInsecticidalLampDevice(this.id)
						this.isDisplayModel = false
					}, 0)
				})
			},
			cmdData() {
				uni.navigateTo({
					url: `/pages/cmdData/cmdData?deviceId=${this.id}`
				})
			},
			goToDeviceParam() {
				uni.navigateTo({
					url: `/pages/deviceParam/deviceParam?id=${this.id}`
				})
			},
		}
	}
</script>

<style scoped>
	/* .solid-bottom::after {
		border-bottom: 1upx solid #efefef ;
	}
	 */
	/* 	.common-box {
		box-shadow: 0upx 8upx 8upx 4upx rgba(0, 0, 0, .04);
		border: 1px solid;
		border-color: rgba(254, 89, 96, 0.3);
	} */

	.text-title {
		color: #3f3f44;
	}

	.text-red-color {
		color: #ff0000;
	}

	.text-blue-color {
		color: #335ed9;
	}

	.text-gray-color {
		color: #cdcdcd;
	}

	.common-shadow {
		box-shadow: 0upx 0upx 10upx 4upx rgba(0, 0, 0, 0.07);
		border-radius: 8px;
		border: 0.05px solid;
		border-color: #efefef;
	}

	.common-box {
		border: solid 2rpx transparent;
		background-image: linear-gradient(#ffeff2, #ffeff2),
			linear-gradient(to right, #ffeff2 0%, #ffd2d5 50%, #ffeff2 100%);
		background-origin: border-box;
		background-clip: content-box, border-box;
	}

	.selectButton {
		color: #fff;
		background-image: linear-gradient(to bottom right, #ff5b62, #ff0202);
	}

	.unSelectButton {
		color: #8799a3;
		background-color: #efefef
	}
</style>
